import { Popup, Tabs } from 'antd-mobile';
import styles from './index.module.scss';
import { useEffect, useState } from 'react';
import { useAppDispatch, useAppSelector } from '@/store';
import {
  addUserChannelsAction,
  delUserChannelsAction,
  getChannelsAction,
  getUserChannelsAction,
  setCurrentIdAction,
} from '@/store/action/channels';
import { channelsType } from '@/store/reducer/channels';
import Icon from '../Icon';
import lodash from 'lodash';
import { useHistory } from 'react-router-dom';
export default function Channels() {
  const history = useHistory();
  const { userChannels, allChannels, currentId } = useAppSelector((state) => state.channels);
  const [visible, setVisible] = useState(false);
  const [editable, setEditable] = useState(false);
  const dispatch = useAppDispatch();
  useEffect(() => {
    dispatch(getChannelsAction());
    dispatch(getUserChannelsAction());
  }, [dispatch]);
  //计算出未选中的频道
  //   const unselectedChannels = allChannels.filter((item: channelsType) => {
  //     return !userChannels.some((userItem: channelsType) => userItem.id === item.id);
  //   });
  const unselectedChannels = lodash.differenceBy(allChannels, userChannels, 'id');

  const handClickEditable = () => {
    setVisible(false);
    setEditable(false);
  };
  return (
    <div className={styles.root}>
      <Tabs
        activeKey={String(currentId)}
        className="tabs"
        onChange={(activeKey) => dispatch(setCurrentIdAction(Number(activeKey)))}
      >
        {userChannels.map((item: channelsType) => {
          return <Tabs.Tab title={item.name} key={item.id} />;
        })}
      </Tabs>
      <div className="right">
        <Icon type="iconbtn_search" onClick={() => history.push('/search')} />
        <Icon type="iconbtn_channel" onClick={() => setVisible(true)} />
      </div>
      <Popup visible={visible} position="left" bodyClassName={styles.channelPopup}>
        {/* 顶部栏：带关闭按钮 */}
        <div className="channel-header">
          <Icon type="iconbtn_channel_close" onClick={handClickEditable} />
        </div>

        {/* 频道列表 */}
        <div className="channel-content">
          {/* 当前已选择的频道列表 */}
          <div className="channel-item edit">
            <div className="channel-item-header">
              <span className="channel-item-title">我的频道</span>
              <span className="channel-item-title-extra">点击删除频道</span>
              <span className="channel-item-edit" onClick={() => setEditable(!editable)}>
                {editable ? '完成' : '编辑'}
              </span>
            </div>

            <div className="channel-list">
              {userChannels.map((item: channelsType) => {
                return (
                  <span key={item.id} className="channel-list-item">
                    {item.name}
                    {editable && (
                      <Icon type="iconbtn_tag_close" onClick={() => dispatch(delUserChannelsAction(item.id))} />
                    )}
                  </span>
                );
              })}
            </div>
          </div>

          {/* 推荐的频道列表 */}
          <div className="channel-item">
            <div className="channel-item-header">
              <span className="channel-item-title">频道推荐</span>
              <span className="channel-item-title-extra">点击添加频道</span>
            </div>
            <div className="channel-list">
              {unselectedChannels.map((item: any) => {
                return (
                  <span
                    key={item.id}
                    className="channel-list-item"
                    onClick={() => dispatch(addUserChannelsAction(item))}
                  >
                    + {item.name}
                  </span>
                );
              })}
            </div>
          </div>
        </div>
      </Popup>
    </div>
  );
}
